import { hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint'
let tool = []
// 渲染左侧
export const elementData = data => {
  console.log(data, 'data')

  let arr = data.map((t, ind) => {
    let options = {
      // 绑定字段
      field: '',
      // 高
      height: '',
      // 宽
      width: '',
      // 图片地址
      url: '',
      // 测试测试
      data: '',
      zIndex: 2
    }
    if (t.options.textType == 'qrcode') {
      options.textType = 'qrcode'
      options.height = 50
      options.width = 50
      // options.lineHeight = 50
      // 条形码给固定宽高
    } else if (t.options.textType == 'barcode') {
      options.textType = 'barcode'
      options.height = 20
      options.width = 120
    } else if (t.options.textType == 'image') {
      options.height = 150
      options.width = 150
      options.src = t.data
    } else {
      options.height = 20
      options.width = 120
    }

    // 绑定字段
    options.field = t.tid
    return {
      tType: 'fid',
      tid: `defaultModule.${t.tid}-${ind}`,
      title: t.title,
      data: t.options.testData || '默认测试数据',
      type: t.options.textType == 'barcode' || t.options.textType == 'qrcode' ? 'text' : t.options.textType,
      options: options,
      printType: t.options.textType
    }
  })

  /**
   * 工具类
   */
  tool = [
    {
      tid: 'defaultModule.logo',
      title: 'LOGO',
      data: import.meta.env.VITE_LOGO_URL,
      options: {
        height: 80,
        width: 80,
        src: import.meta.env.VITE_LOGO_URL,
        zIndex: 1
      },
      type: 'image'
    },

    {
      tid: 'defaultModule.hline',
      title: '横线',
      type: 'hline'
    },
    {
      tid: 'defaultModule.vline',
      title: '竖线',
      type: 'vline'
    },
    {
      tid: 'defaultModule.rect',
      title: '矩形',
      type: 'rect'
    },
    {
      tid: 'defaultModule.oval',
      title: '椭圆',
      type: 'oval'
    },
    {
      tid: 'defaultModule.text',
      title: '文本',
      type: 'text'
    },
    {
      tid: 'defaultModule.html',
      title: 'html',
      formatter: function (data, options) {
        return `
        <div style="width: 240px; height: 180px; background-color: red; position: relative;">
            <!-- 大星 -->
            <div style="position: absolute; top: 30px; left:30px; width: 40px; height: 40px; background-color: yellow; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);"></div>
            <!-- 四个小星 -->
            <div style="position: absolute; top: 10px; left: 60px; width: 24px; height: 24px; background-color: yellow; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transform: rotate(45deg) translate(12px, -12px);"></div>
            <div style="position: absolute; top: 35px; left: 85px; width: 24px; height: 24px; background-color: yellow; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transform: rotate(-45deg) translate(12px, 5px);"></div>
            <div style="position: absolute; top: 55px; left: 85px; width: 24px; height: 24px; background-color: yellow; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transform: rotate(-45deg) translate(10px, 10px);"></div>
            <div style="position: absolute; top: 70px; left: 60px; width: 24px; height: 24px; background-color: yellow; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transform: rotate(45deg) translate(12px, -12px);"></div>
        </div>
    `
      },
      type: 'html'
    },
    {
      tid: 'defaultModule.table',
      title: '表格模版',
      type: 'table',
      // groupFooterFormatter: function (group, option) {
      //   return `<td  colspan="1">${'合计 '}</td>
      //   <td  colspan="1">${data?.detailList.reduce((acc, item) => acc + Number(item.num), 0)}</td>
      //    <td  colspan="1">${data?.detailList.reduce((acc, item) => acc + Number(item.materialCode), 0)}</td>
      //   `
      // },
      options: {
        field: 'detailList',
        // tableHeaderRepeat: '',
        // tableBorder: 'noBorder',
        // tableHeaderBorder: 'noBorder',
        // tableHeaderCellBorder: 'noBorder',
        // tableBodyRowBorder: 'noBorder',
        // tableBodyCellBorder: 'noBorder',
        // tableFooterBorder: 'noBorder',
        // tableFooterCellBorder: 'noBorder',
        fields: [
          { text: '序号', field: 'num' },
          { text: '物料编码', field: 'materialCode' },
          { text: '物料名称', field: 'materialName' }
        ],
        width: '220'
      },
      columns: [
        [
          {
            title: '行号',
            fixed: true,
            rowspan: 2, //表示从上往下占2格
            field: 'num',
            width: '50'
          },
          {
            title: '测试一级表头1',
            width: '300',
            colspan: 2 //表示从左往右占2格
          },
          { title: '测试一级表头2', colspan: 2, width: '220' }
        ],
        [
          { title: '序号', field: 'num', width: '150' },
          {
            title: '物料编码',
            field: 'materialCode',
            width: '150'
          },
          { title: '物料名称', field: 'materialName', width: '220' }
        ]
      ],
      footerFormatter: function (options, rows, data, currentPageGridRowsData) {
        if (data && data['totalCap']) {
          return `<td  colspan="3">${'合计: ' + data['totalCap']}</td>`
        }
        return '<td  colspan="3">合计: </td>'
      }
      // footerFormatter: function (options, rows, data, currentPageGridRowsData) {
      //   return `<td  colspan="1">${'合计 '}</td>
      //   <td  colspan="1">${data?.detailList.reduce((acc, item) => acc + Number(item.num), 0) || ''}</td>
      //    <td  colspan="1">${data?.detailList.reduce((acc, item) => acc + Number(item.materialCode), 0) || ''}</td>
      //   `
      // },
      // tableSummaryFormatter: function () {
      //   return `<td  colspan="1">${'合计 '}</td>
      //   <td  colspan="1">${data?.detailList.reduce((acc, item) => acc + Number(item.num), 0) || ''}</td>
      //    <td  colspan="1">${data?.detailList.reduce((acc, item) => acc + Number(item.materialCode), 0) || ''}</td>
      //   `
      // }
    },
    {
      tid: 'defaultModule.emptyTable',
      title: '空白表格',
      type: 'table',
      groupFooterFormatter: function (group, option) {
        console.log(group, 'group')
        console.log(option, 'option')
        return '合计'
      },
      columns: [
        [
          {
            title: '',
            field: ''
          },
          {
            title: '',
            field: ''
          }
        ]
      ]
    }
  ]

  return { tool, arr }
}

/**
 * Creates a provider function that adds element types to the context.
 *
 * @param {Object} data - The data object.
 * @return {Object} An object with the `addElementTypes` method.
 */
export const provider = data => {
  /**
   * Adds element types to the context.
   *
   * @param {Object} context - The context object.
   * @return {Promise} A promise that resolves when the element types are added.
   */
  var addElementTypes = async function (context) {
    // 移除 旧的 defaultModule "元素"类型, 以避免重复
    context.removePrintElementTypes('defaultModule')

    // 添加 defaultModule "元素"类型
    context.addPrintElementTypes('defaultModule', [
      // PrintElementTypeGroup 分组 如果使用
      //new hiprint.PrintElementTypeManager.build('.hiprintEpContainer2', "defaultModule"), //这里会渲染这个 "常规" 分组名称
      new hiprint.PrintElementTypeGroup('常规', data),

      new hiprint.PrintElementTypeGroup('辅助', [
        {
          tid: 'defaultModule.logo',
          title: 'GOLO',
          printType: 'image'
        },
        {
          tid: 'defaultModule.hline',
          title: '横线',
          type: 'hline'
        },
        {
          tid: 'defaultModule.vline',
          title: '竖线',
          type: 'vline'
        },
        {
          tid: 'defaultModule.rect',
          title: '矩形',
          type: 'rect'
        },
        {
          tid: 'defaultModule.oval',
          title: '椭圆',
          type: 'oval'
        }
      ])
    ])

    // 表格 打印面板添加表格元素 content为字符串
  }

  return {
    addElementTypes: addElementTypes
  }
}
